<template>
<div>


  <el-row :gutter="20">
  <el-col :span="8"><div >&nbsp;</div></el-col>
  <el-col :span="12">
  
  <el-button type="success" v-if="this.isgold==1" @click="open1()">再淘一个</el-button>
  <el-button type="success" v-if="this.isgold==0" :disabled="true">淘币不足</el-button>
  <el-button type="success" @click="open3()">返回池子</el-button>
  <el-button type="success" v-if="this.iscollect==0" @click="collectmsg()">收藏消息</el-button>
  <el-button type="success" v-if="this.iscollect==1" @click="uncollectmsg()">取消收藏</el-button>
  <el-button type="success" v-if="this.isreport==0" @click="report()">举报消息</el-button>
  <el-button type="success" v-if="this.isreport==1" @click="unreport()">取消举报</el-button>
  <el-row :gutter="20">
  <el-col :span="0"><div >&nbsp;</div></el-col>
  <el-col :span="20">
  <p>淘到的消息</p>
  <p>{{this.$store.state.msg.msgtext}}</p>
  </el-col>
  </el-row>

  <el-row :gutter="20">
  <el-col :span="4"><div >&nbsp;</div></el-col>
  <el-col :span="16">
  <div class="image-msg" v-for="mypath in this.$store.state.msg.msgpath"><img v-bind:src="mypath" class="image-item" ></div>
  </el-col>
  </el-row>

  </el-col>
  </el-row>

  <el-row :gutter="20">
  <el-col :span="4"><div >&nbsp;</div></el-col>
  <el-col :span="16">
  <div class="grid-content bg-purple">
  消息的评论
  </div>
  <div class="item" v-for="comment in comments" >
    <p>{{comment.text}}</p><br>
    </div>
  </el-col>
  </el-row>

  <el-row :gutter="20">
  <el-col :span="4"><div >&nbsp;</div></el-col>
  <el-col :span="16">

        <div>
            <el-button-group v-if="this.isupordown == -1">
            <el-button type="primary" @click="up()">{{this.$store.state.msg.msgup}}赞</el-button>
            <el-button type="primary" @click="down()">{{this.$store.state.msg.msgdown}}踩</el-button>
            </el-button-group>
            <el-button-group v-if="this.isupordown == 0">
            <el-button type="primary" @click="up2()">{{this.$store.state.msg.msgup}}赞</el-button>
            <el-button type="primary" :disabled="true">{{this.$store.state.msg.msgdown}}踩</el-button>
            </el-button-group>
            <el-button-group v-if="this.isupordown == 1">
            <el-button type="primary" :disabled="true">{{this.$store.state.msg.msgup}}赞</el-button>
            <el-button type="primary" @click="down2()">{{this.$store.state.msg.msgdown}}踩</el-button>
            </el-button-group>
        </div>

        <br/>
      <el-form :label-position="labelPosition" label-width="80px">
        <el-form-item label="我的评论:" >
          <div style="width:30%">
          <el-input v-model="mycomment" size="large" placeholder="请输入您的评论！"></el-input>
          </div>
          
          <br/>
          
          <div>
            <el-button type="primary" @click="open2()">提交评论</el-button>
          </div>


        </el-form-item>
      </el-form><br/><br/>
  </el-col>
 </el-row>

</el-row>
</div>
</template>

<script>
import axios from 'axios'
import store from './vuex/store'

const myApi = axios.create({
  baseURL: 'http://localhost:8081',
  withCredentials: true,
  headers: {
    'Accept' : 'application/json',
    'Content-Type': 'application/json',
  }
});

export default {
  data () {
    return {
            labelPosition: 'right',
            msgContent:'',
            mycomment: '',
            isupordown: '',
            upCount:0,
            downCount:0,
            comments: [],
            iscollect:'',
            isgold:'',
            isreport:'',
        }
  },
  methods: {
      open2() {
        var axiosThis = this;        
        myApi.get('/comment/addComment',
        {
           params:{
             'commonComment.text':axiosThis.mycomment,
              'commonComment.writerid': axiosThis.$store.state.userinfo.uid,
              'commonComment.mid': axiosThis.$store.state.msg.msgid
           }
        })
                  .then(function(res){
                      axiosThis.$store.dispatch('setnew' , 0 );
                      axiosThis.$router.push('/getmsg');
                  })
                  .catch(function(err){
                  });
        
            this.$message({
            type: 'success',
            message: '评论成功!'
          });
      
      },
      open1(){
        this.$store.dispatch('setnew' , 1 );
        this.$router.push('/getmsg');
      },
      open3(){
        this.$store.dispatch('setnew' , 1 );
        this.$router.push('/pool');
      },

      up(){
        var axiosThis = this;
        myApi.get('/messages/addUpOrDown',
        {
           params:{
              'commonMsgUpOrDown.uid':axiosThis.$store.state.userinfo.uid,
              'commonMsgUpOrDown.mid':axiosThis.$store.state.msg.msgid,
              'commonMsgUpOrDown.myflag': 1
           }
        })
                  .then(function(response){
                      // axiosThis.$store.dispatch('setnew' , 0 );
                      axiosThis.$store.dispatch('up');
                      axiosThis.$store.dispatch('setnew' , 0 );
                      axiosThis.$router.push('/getmsg');
                      //console.log(response);
                  })
                  .catch(function(error){
                  });
      },
      up2(){
        var axiosThis = this;
        myApi.get('/messages/addUpOrDown',
        {
           params:{
              'commonMsgUpOrDown.uid':axiosThis.$store.state.userinfo.uid,
              'commonMsgUpOrDown.mid':axiosThis.$store.state.msg.msgid,
              'commonMsgUpOrDown.myflag': 1
           }
        })
                  .then(function(response){
                      // axiosThis.$store.dispatch('setnew' , 0 );
                      axiosThis.$store.dispatch('up2');
                      axiosThis.$store.dispatch('setnew' , 0 );
                      axiosThis.$router.push('/getmsg');
                      //console.log(response);
                  })
                  .catch(function(error){
                  });
      },
      down(){
        var axiosThis = this;
        myApi.get('/messages/addUpOrDown',
        {
           params:{
              'commonMsgUpOrDown.uid':axiosThis.$store.state.userinfo.uid,
              'commonMsgUpOrDown.mid':axiosThis.$store.state.msg.msgid,
              'commonMsgUpOrDown.myflag': 0
           }
        })
                  .then(function(response){
                      // axiosThis.$store.dispatch('setnew' , 0 );
                      axiosThis.$store.dispatch('down');
                      axiosThis.$store.dispatch('setnew' , 0 );
                      axiosThis.$router.push('/getmsg');
                      //console.log(response);
                  })
                  .catch(function(error){
                  });
      },
      down2(){
        var axiosThis = this;
        myApi.get('/messages/addUpOrDown',
        {
           params:{
              'commonMsgUpOrDown.uid':axiosThis.$store.state.userinfo.uid,
              'commonMsgUpOrDown.mid':axiosThis.$store.state.msg.msgid,
              'commonMsgUpOrDown.myflag': 0
           }
        })
                  .then(function(response){
                      // axiosThis.$store.dispatch('setnew' , 0 );
                      axiosThis.$store.dispatch('down2');
                      axiosThis.$store.dispatch('setnew' , 0 );
                      axiosThis.$router.push('/getmsg');
                      //console.log(response);
                  })
                  .catch(function(error){
                  });
      },
      collectmsg(){
        var axiosThis = this;
        myApi.get('/messages/collectMsg',
        {
           params:{
              'uid':axiosThis.$store.state.userinfo.uid,
              'mid':axiosThis.$store.state.msg.msgid,
           }
        })
                  .then(function(response){
                      // axiosThis.$store.dispatch('setnew' , 0 );
                      // axiosThis.$router.push('/getmsg2');
                      //console.log(response.data.message);
                      //axiosThis.iscollect = response.data.id; 
                      axiosThis.$store.dispatch('setnew' , 0 );
                      axiosThis.$router.push('/getmsg');
                  })
                  .catch(function(error){
                  });
      },
      uncollectmsg(){
        var axiosThis = this;
        myApi.get('/messages/cancelCollectMsg',
        {
           params:{
              'uid':axiosThis.$store.state.userinfo.uid,
              'mid':axiosThis.$store.state.msg.msgid,
           }
        })
                  .then(function(response){
                      // axiosThis.$store.dispatch('setnew' , 0 );
                      // axiosThis.$router.push('/getmsg2');
                      //console.log(response.data.message);
                      //axiosThis.iscollect = response.data.id;
                      axiosThis.$store.dispatch('setnew' , 0 );
                      axiosThis.$router.push('/getmsg'); 
                  })
                  .catch(function(error){
                  });
      },
      report(){
        var axiosThis = this;
        myApi.get('/messages/reportMsg',
        {
           params:{
              'uid':axiosThis.$store.state.userinfo.uid,
              'mid':axiosThis.$store.state.msg.msgid,
           }
        })
                  .then(function(response){
                      // axiosThis.$store.dispatch('setnew' , 0 );
                      // axiosThis.$router.push('/getmsg2');
                      console.log(response.data.message);
                      //axiosThis.iscollect = response.data.id; 
                      axiosThis.$store.dispatch('setnew' , 0 );
                      axiosThis.$router.push('/getmsg');
                  })
                  .catch(function(error){
                  });
      },
      unreport(){
        var axiosThis = this;
        myApi.get('/messages/cancleReportMsg',
        {
           params:{
              'uid':axiosThis.$store.state.userinfo.uid,
              'mid':axiosThis.$store.state.msg.msgid,
           }
        })
                  .then(function(response){
                      // axiosThis.$store.dispatch('setnew' , 0 );
                      // axiosThis.$router.push('/getmsg2');
                      console.log(response.data.message);
                      //axiosThis.iscollect = response.data.id; 
                      axiosThis.$store.dispatch('setnew' , 0 );
                      axiosThis.$router.push('/getmsg');
                  })
                  .catch(function(error){
                  });
      },

    },
    

    created: function () {
          var axiosThis = this;
          if(axiosThis.$store.state.pool.newmsg == 1 )
          {
          axios.get('http://localhost:8081/messages/queryOneMessageByUidAndPoolid',{
                    params: {
                        poolid : axiosThis.$store.state.pool.poolid,
                        uid : axiosThis.$store.state.userinfo.uid
                    }
                })
                  .then(function (response) {
                    //console.log(response);;
                    axiosThis.$store.dispatch('getmsg' , {
                      'id': response.data.mid,
                      'text': response.data.text,
                      'up': response.data.upnum,
                      'down':response.data.downnum,
                      'filepath':response.data.filepath
                    } );
                    // console.log('路径');
                    // console.log(axiosThis.$store.state.msg.msgpath);
                    axiosThis.isgold=response.data.hasgold;
                    console.log(111111);
                    console.log(axiosThis.$store.state.userinfo.uid);
                    console.log(axiosThis.$store.state.msg.msgid);

                    var axiosThis2 = axiosThis;
                    myApi.get('/messages/isUpOrDown',
        {
           params:{
              'mid':axiosThis2.$store.state.msg.msgid,
              'uid':axiosThis2.$store.state.userinfo.uid
           }
        })
                  .then(function(response){
                      axiosThis2.isupordown = response.data.id; 
                      console.log(response.data.message);
                       console.log(axiosThis2.$store.state.userinfo.uid);
                       console.log(axiosThis2.$store.state.msg.msgid);
                  })
                  .catch(function(error){
                  });
        myApi.get('/messages/isCollect',
        {
           params:{
              'uid':axiosThis2.$store.state.userinfo.uid,
              'mid':axiosThis2.$store.state.msg.msgid,
           }
        })
                  .then(function(response){
                      axiosThis.iscollect = response.data.id; 
                      console.log(response.data.message);
                       console.log(axiosThis2.$store.state.userinfo.uid);
                       console.log(axiosThis2.$store.state.msg.msgid);
                  })
                  .catch(function(error){
                  });

        myApi.get('/messages/isReportMsg',
        {
           params:{
              'uid':axiosThis2.$store.state.userinfo.uid,
              'mid':axiosThis2.$store.state.msg.msgid,
           }
        })
                  .then(function(response){
                      // axiosThis.$store.dispatch('setnew' , 0 );
                      // axiosThis.$router.push('/getmsg2');
                      axiosThis.isreport=response.data.id;
                      console.log(response.data.message);
                       console.log(axiosThis2.$store.state.userinfo.uid);
                       console.log(axiosThis2.$store.state.msg.msgid);
                      //axiosThis.iscollect = response.data.id; 
                  })
                  .catch(function(error){
                  });


                    axios.get('http://localhost:8081/comment/getComments',{
                    params: {
                        mid : axiosThis2.$store.state.msg.msgid
                    }
                })
                .then(function (response) {
                  axiosThis2.comments=response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });

                  })
                  .catch(function (error) {
                      console.log(error);
                  });
            }
       else if(axiosThis.$store.state.pool.newmsg == 0 )
          {
        axios.get('http://localhost:8081/comment/getComments',{
                    params: {
                        mid : axiosThis.$store.state.msg.msgid
                    }
                })
        .then(function (response) {
                   var axiosThis2 = axiosThis;
                  myApi.get('/messages/isUpOrDown',
        {
           params:{
              'mid':axiosThis2.$store.state.msg.msgid,
              'uid':axiosThis2.$store.state.userinfo.uid
           }
        })
                  .then(function(response){
                      axiosThis2.isupordown = response.data.id; 
                      console.log(response.data.message);
                       console.log(axiosThis2.$store.state.userinfo.uid);
                       console.log(axiosThis2.$store.state.msg.msgid);
                  })
                  .catch(function(error){
                  });
        myApi.get('/messages/isCollect',
        {
           params:{
              'uid':axiosThis2.$store.state.userinfo.uid,
              'mid':axiosThis2.$store.state.msg.msgid,
           }
        })
                  .then(function(response){
                      axiosThis.iscollect = response.data.id; 
                      console.log(response.data.message);
                       console.log(axiosThis2.$store.state.userinfo.uid);
                       console.log(axiosThis2.$store.state.msg.msgid);
                  })
                  .catch(function(error){
                  });

        myApi.get('/messages/isReportMsg',
        {
           params:{
              'uid':axiosThis2.$store.state.userinfo.uid,
              'mid':axiosThis2.$store.state.msg.msgid,
           }
        })
                  .then(function(response){
                      // axiosThis.$store.dispatch('setnew' , 0 );
                      // axiosThis.$router.push('/getmsg2');
                      axiosThis.isreport=response.data.id;
                      console.log(response.data.message);
                       console.log(axiosThis2.$store.state.userinfo.uid);
                       console.log(axiosThis2.$store.state.msg.msgid);
                      //axiosThis.iscollect = response.data.id; 
                  })
                  .catch(function(error){
                  });

                   myApi.get('/messages/isHasGold',{
                    params: {
                        uid: axiosThis2.$store.state.userinfo.uid, 
                        poolid: axiosThis2.$store.state.pool.poolid
                                  }
                              }).then(response => {
                        console.log(response);
                          axiosThis2.isgold=response.data.id;
                          console.log(axiosThis2.isgold);
                      }, response => {
                          // error callback
                      });
                  axiosThis.comments=response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
          }
    }

}

</script>

<style>
  .el-row {
    margin-top:30px;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
 .image-msg{
    width: 80%; 
    height: 80%;
  }
  .image-item{
    width: 250px; 
    height: 250px;
  }
</style>
